﻿@model ContentSliderSettings
@using CAF.Infrastructure.Core.Domain.Cms;
@using CAF.WebSite.Application.WebUI.Themes;

@{
    var isActive = Model.IsActive && Model.Slides.Where(x => x.Published).Any();

    if (isActive)
    {
        //Html.AddCssFileParts(false, Html.ThemePath("Content/slider.less"));
        //Html.AddScriptParts("~/bundles/sequencejs");
    }
    <div class="header">
        <div class="module-default">
            <div class="module-inner">
                <div class="module-content">
                    <div class="slideshow carousel clearfix" style="height:600px; overflow:hidden;">
                        <div id="carousel-slider">
                            @foreach (ContentSliderSlideSettings slide in Model.Slides)
                            {
                                <div class="carousel-item">
                                    <div class="carousel-img">
                                        <a href="javascript:;" target="">
                                            <img src="@Url.Content(slide.BackgroundPictureUrl)" height="600" alt="@slide.Title" />
                                        </a>
                                    </div>
                                </div>
                            }

                        </div>
                        <div class="carousel-btn carousel-btn-fixed" id="carousel-page-slider">
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(window).bind("load resize", function () {
                            $("#carousel-slider").carouFredSel({
                                width: '100%',
                                items: { visible: 1 },
                                auto: { pauseOnHover: true, timeoutDuration: 5000 },
                                swipe: { onTouch: true, onMouse: true },
                                pagination: "#carousel-page-slider"
                                //prev   : { button:"#carousel-prev-slider"},
                                //next   : { button:"#carousel-next-slider"},
                                //scroll   : { fx : "crossfade" }
                            });
                        });
                    </script>
                </div>
            </div>
        </div>
    </div>
}


